<!-- 拍品展示CardView -->
<template name="ap-card">
	<view class="card-all-wrapper" @click="tapCard"
	hover-class="x-card-all-hover" hover-start-time="20" hover-stay-time="50">
		<view class="card-head-wrapper flex-row flex-justify-between flex-align-center padding-border-top margin-border-left-right">
			<view class="flex-row">
				<image class="card-head-image" :src="cardValue.photo"></image>
				<view class="card-head-text-wrapper flex-column">
					<text class="card-head-text-primary">{{cardValue.name}}</text>
					<text class="card-head-text-sub color-sub">{{$common.previousTime(cardValue.date)}}</text>
				</view>
			</view>
		</view>
		<view class="flex-column margin-border-left-right">
			<text class="card-content-text-title">{{cardValue.title}}</text>
			<view class="flex-row">
				<text class="card-content-text-sub color-sub">{{cardValue.info}}</text>
			</view>
			<view class="flex-row">
				<view class="card-content-image-wrapper" 
				:style="[{width : imagesWidth()} , {'padding-bottom' : imagesPaddingBottom()}]"
				v-for="(item,index) in cardValue.images" :key="index">
					<image mode="aspectFill" class="card-content-image" 
					:class="(cardValue.images.length == 1) ? 'left-radius right-radius' : index == 0 ? 'left-radius' : index == cardValue.images.length - 1 ? 'right-radius' : ''"
					:src="cardValue.images[index]"></image>
				</view>
			</view>
		</view>
		<view class="flex-row flex-justify-between padding-border-bottom margin-border-left-right" style="margin-top: 20rpx;">
			<view class="flex-row flex-align-center">
				<text class="card-last-text">{{$common.numberFormat(cardValue.look)}} 浏览</text>
			</view>
			<view class="flex-row flex-align-center">
				<ap-tag
				:value="cardValue.tag == 0 ? '已拍卖' : cardValue.tag == 1 ? '正在拍卖' : '已流拍'"
				:r="cardValue.tag == 0 ? orange.r : cardValue.tag == 1 ? blue.r : red.r" 
				:g="cardValue.tag == 0 ? orange.g : cardValue.tag == 1 ? blue.g : red.g" 
				:b="cardValue.tag == 0 ? orange.b : cardValue.tag == 1 ? blue.b : red.b"></ap-tag>
			</view>
		</view>
	</view>
</template>

<script>
	
	/**
	 * ap-card 拍品展示卡片
	 * @description 显示失物招领的粗略展示信息的卡片
	 * @property {Object} cardValue = 填入布局的对应内容 
	 */
	
	//失物招领TAG
	import apTag from "../ap-tag/ap-tag.vue";
	
	export default {
		name:"ap-card",
		data() {
			return {
				orange:{
					r:'255',
					g:'144',
					b:'8'
				},
				blue:{
					r:'0',
					g:'122',
					b:'255'
				},
				red:{
					r:'219',
					g:'72',
					b:'67'
				}
			};
		},
		props:{
			cardValue:{
				type:Object,
				default(){
					return {};
				}
			}
		},
		methods:{
			tapCard(){
				this.$emit('tapCard',this.cardValue.lotId);
			},
			imagesWidth(){
				if(typeof(this.cardValue.images) == 'undefined' || this.cardValue.images == null){
					return '';
				}
				return parseInt(100/this.cardValue.images.length) + '%';
			},
			imagesPaddingBottom(){
				if(typeof(this.cardValue.images) == 'undefined' || this.cardValue.images == null){
					return '';
				}
				return (100/Math.max(this.cardValue.images.length,2)) + '%';
			},

		},
		components: {
			apTag
		},
	}
</script>

<style>
	
	.flex-column{
		display: flex;
		flex-direction: column;
	}
	
	.flex-row{
		display: flex;
	}
	
	.flex-justify-between{
		justify-content: space-between;
	}
	
	.flex-align-center{
		align-items: center;
	}
	
	.color-white{
		color: #FFFFFF;
	}
	
	.color-sub{
		color: #666666;
	}
	
	.padding-border-top{
		padding-top: 25rpx;
	}
	.margin-border-left-right{
		margin-left: 25rpx;
		margin-right: 25rpx;
	}
	.padding-border-bottom{
		padding-bottom: 25rpx;
	}
	
	/* 卡片最外层包裹 */
	.card-all-wrapper{
		border: #efeff0 1px solid;
		box-shadow: 0 10rpx 22rpx rgba(0, 0, 0, 0.05);
		border-radius: 18rpx;
		
		transition: 0.15s ease-in-out;
		transform: scale(1);
	}
	
	/* 整个卡片处于hover状态时 */
	.x-card-all-hover{
		transform: scale(0.98);
		background-color: rgba(225,225,225,0.1);
	}
	
	/* 头部展示包裹 */
	.card-head-wrapper{
		margin-bottom: 14rpx;
	}
	
	/* 头部的头像 */
	.card-head-image{
		width: 65rpx;
		height: 65rpx;
		border-radius: 50%;
	}
	
	/* 头部的文字包裹 */
	.card-head-text-wrapper{
		margin-left: 20rpx;
		line-height: 34rpx;
	}
	
	/* 头部主要文字 */
	.card-head-text-primary{
		font-size: 30rpx;
		color: #000000;
		font-weight: bold;
	}
	
	/* 头部次要文字 */
	.card-head-text-sub{
		font-size: 22rpx;
		margin-top: 5rpx;
	}
	
	/* 头部TAG */
	.card-head-tag{
		justify-self: end;
	}
	
	.card-content-text-title-wrapper{
		display: flex;
		flex-direction: row;
	}
	
	/* 卡片内容文字标题 */
	.card-content-text-title{
		font-weight: bold;
		font-size: 35rpx;
		line-height: 48rpx;
		
		margin-top: 5rpx;
		margin-bottom: 10rpx;
	}
	
	/* 卡片内容次要文字 */
	.card-content-text-sub{
		font-size: 30rpx;
		line-height: 45rpx;
		
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;  /* 控制多行的行数 */
		-webkit-box-orient: vertical;
		
		margin-bottom: 10rpx;
	}
	
	/* 卡片图片内容包裹 */
	.card-content-image-wrapper{
		position: relative;
		height: 0;
		margin: 12rpx 10rpx 10rpx 0rpx;
	}
	
	/* 卡片内容图片 */
	.card-content-image{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.card-last-icon{
		color: #666666;
		font-size: 35rpx;
		margin-right: 10rpx;
	}
	
	.card-last-text{
		font-size: 25rpx;
		color: #666666;
		margin-right: 18rpx;
	}
	
	.card-content-image-wrapper .left-radius{
		border-bottom-left-radius: 24rpx;
		border-top-left-radius: 24rpx;
	}
	
	.card-content-image-wrapper .right-radius{
		border-bottom-right-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}

</style>
